<!-- 人才库-购买套餐 -->
<template>
	<view class="package-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<!-- <text class="page-title">人才套餐</text> -->
			<text class="remaining-count">人才套餐剩余可查看：{{ tcnum }}份</text>
		</view>

		<!-- 套餐选项 -->
		<view class="package-options">
			<!-- 限时待遇套餐 -->
			<view class="package-item" v-for="(item,index) in tcPacage" :class="{ 'selected': selectedIndex === index }" @click="selectPackage(index)">
				<view class="package-content" >
					<text class="feature">简历{{ item.gwtc_num }}份</text>
					<view class="price-section">
						<text class="current-price">¥{{ item.gwtc_price }}</text>
						<text class="original-price">¥{{ item.gwtc_oneprice }}</text>
					</view>
				</view>
				<view class="select-radio">
					<u-icon :name="selectedIndex === index ? 'checkbox-mark' : 'circle'"
						:color="selectedIndex === index ? '#2979ff' : '#c0c4cc'" size="20"></u-icon>
				</view>
			</view>

			<!-- 20份套餐 -->
<!-- 			<view class="package-item" :class="{ 'selected': selectedPackage.id === 2 }" @click="selectPackage(2)">
				<view class="package-header">
					<text class="package-name">简历{{ packages[1].count }}份</text>
				</view>
				<view class="package-content">
					<view class="price-section single-price">
						<text class="current-price">¥{{ packages[1].price }}</text>
					</view>
				</view>
				<view class="select-radio">
					<u-icon :name="selectedPackage.id === 2 ? 'checkbox-mark' : 'circle'"
						:color="selectedPackage.id === 2 ? '#2979ff' : '#c0c4cc'" size="20"></u-icon>
				</view>
			</view> -->
		</view>

		<!-- 支付金额 -->
		<view class="invitation-popup">
			<!-- 需要支付的详情 -->
			<view class="pay-container">
				<!-- 金额汇总 -->
				<view class="card">
					<view class="amount-item">
						<text>订单金额</text>
						<text>¥{{selectedSalar}}</text>
					</view>
					<view class="amount-item">
						<text>优惠折扣</text>
						<text>-¥{{selectedZk}}</text>
					</view>
					<view class="total-amount">
						<text>需支付：</text>
						<text class="price">￥{{selectedPay}}</text>
					</view>
				</view>
				<!-- 分界线 -->
				<u-line class="u-line" color="#c9cbd0"></u-line>
				<!-- 支付方式 -->
				<view class="card">
					<view class="payment-item" @click="selectPayment('wechat')">
						<u-checkbox v-model="payment.wechat" shape="circle" active-color="#03B8CD"></u-checkbox>
						<view class="payment-info">
							<!-- <image src="/static/images/wechat-pay.png" class="payment-icon"></image> -->
							<text>微信支付</text>
						</view>
					</view>
				</view>
				<!-- 底部支付按钮 -->
				<view class="footer">
					<u-button type="primary" shape="circle" @click="confirmPayment" :disabled="!payment.wechat && !payment.other"
						:custom-style="btuStyle">
						确认支付
					</u-button>
				</view>
			</view>
		</view>




		<!-- 订单金额 -->
		<!--    <view class="order-summary">
      <text class="section-title">订单金额</text>
      <view class="price-row">
        <text>¥{{ selectedPackage.price }}</text>
      </view>
      <view class="total-price">
        <text class="label">需支付：</text>
        <text class="value">¥{{ selectedPackage.price }}</text>
      </view>
    </view> -->

		<!-- 支付方式 -->
		<!--    <view class="payment-methods">
      <text class="section-title">选择支付方式</text>
      <view 
        class="method-item" 
        :class="{ 'selected': paymentMethod === 'wechat' }"
        @click="paymentMethod = 'wechat'"
      >
        <u-icon name="weixin-fill" size="40" color="#09bb07"></u-icon>
        <text class="method-name">微信支付</text>
        <u-icon 
          name="checkbox-mark" 
          size="20" 
          :color="paymentMethod === 'wechat' ? '#2979ff' : 'transparent'"
        ></u-icon>
      </view>
    </view> -->

		<!-- 支付按钮 -->
		<!--    <view class="payment-footer">
      <u-button 
        type="primary" 
        shape="circle" 
        @click="handlePayment"
        :loading="loading"
      >
        确认支付 ¥{{ selectedPackage.price }}
      </u-button>
    </view>
    -->
		<!-- 支付结果弹窗 -->
		<!--    <u-modal 
      v-model="showPaymentResult" 
      :title="paymentResult.title"
      :content="paymentResult.message"
      :confirm-text="paymentResult.confirmText"
      show-cancel-button
      @confirm="paymentResultHandler"
    ></u-modal> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remainingCount: 10,
				selectedPackage: {
					id: 1,
					name: '限时待遇',
					count: 10,
					price: '0.10',
					originalPrice: '2.00'
				},
				packages: [{
						id: 1,
						name: '限时待遇',
						count: 10,
						price: '0.10',
						originalPrice: '2.00'
					},
					{
						id: 2,
						name: '标准套餐',
						count: 20,
						price: '4.00',
						originalPrice: '4.00'
					}
				],
				paymentMethod: 'wechat',
				loading: false,
				showPaymentResult: false,
				paymentResult: {
					success: false,
					title: '',
					message: '',
					confirmText: '确定'
				},
				payment: {
					wechat: false,
					other: true
				},
				btuStyle: {
					"backgroundColor": "#03B8CD",
					"color": "#ffffff"
				},
				tcnum: 0, ///接收到的套餐数量
				tcPacage: [] ,////套餐
				selectedIndex: -1, // 当前选中项的索引
				selectedSalar: 0, //订单金额
				selectedZk: 0  ,//优惠折扣
				selectedPay: 0 ///需要付的金额
			}
		},
		onLoad(options) {
			this.tcnum = options.tcnum;
		},
		onShow() {
			this.$u.api.querygwtc({
				"qwtccode": '',
				"qwtcstate": ''
			}).then(res => {
				console.log('套餐：', res)
				this.tcPacage = res.data.base_info
			})
		},
		methods: {
			// 选择套餐项
			selectPackage(id) {
				// this.selectedPackage = this.selectedPackage.find(item => item.id === id)
				this.selectedIndex = id;
				this.selectedSalar = this.tcPacage[id].gwtc_price
				this.selectedZk = this.tcPacage[id].gwtc_oneprice
				this.selectedPay = this.selectedSalar - this.selectedZk
				console.log('套餐：', this.selectedPackage)
			},
			
			//支付购买
			confirmPayment() {
				
			},

			async handlePayment() {
				if (!this.selectedPackage) {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none'
					})
					return
				}

				this.loading = true

				try {
					// 模拟支付流程
					await this.mockPayment()

					this.paymentResult = {
						success: true,
						title: '支付成功',
						message: `您已成功购买${this.selectedPackage.name}`,
						confirmText: '查看订单'
					}
				} catch (error) {
					this.paymentResult = {
						success: false,
						title: '支付失败',
						message: error.message || '支付过程中出现问题',
						confirmText: '重新支付'
					}
				} finally {
					this.loading = false
					this.showPaymentResult = true
				}
			},

			mockPayment() {
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						// 模拟80%成功率
						if (Math.random() > 0.2) {
							resolve()
						} else {
							reject(new Error('支付超时，请重试'))
						}
					}, 2000)
				})
			},

			paymentResultHandler() {
				if (this.paymentResult.success) {
					// 支付成功，更新剩余数量
					this.remainingCount += this.selectedPackage.count
					uni.navigateTo({
						url: '/pages/order/detail'
					})
				} else {
					// 支付失败，重新支付
					this.showPaymentResult = false
				}
			},
			selectPayment(type) {
				// 单选逻辑
				if (type === 'wechat') {
					this.payment.wechat = true
					this.payment.other = false
				} else {
					this.payment.wechat = false
					this.payment.other = true
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.package-container {
		padding: 30rpx;
		background-color: #F1F7F7;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	.page-header {
		margin-bottom: 40rpx;

		.page-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}

		.remaining-count {
			font-size: 28rpx;
			color: #666;
		}
	}

	.package-options {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
		margin-bottom: 40rpx;
	}

	.package-item {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		position: relative;
		border: 2rpx solid #eee;

		&.selected {
			// border-color: #E4F6F8;
			// background-color: #03B8CD ;
			background: #E4F6F8;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 4rpx solid #03B8CD;
		}

		.package-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.package-name {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
			}
		}

		.package-content {
			.feature {
				font-size: 30rpx;
				color: #666;
				margin-bottom: 15rpx;
				display: block;
				font-weight: bold;
			}

			.price-section {
				display: flex;
				align-items: flex-end;
				flex-direction: column;

				&.single-price {
					justify-content: flex-end;
				}

				.original-price {
					font-size: 24rpx;
					color: #999;
					text-decoration: line-through;
					margin-right: 15rpx;
				}

				.current-price {
					font-size: 36rpx;
					font-weight: bold;
					color: #f56c6c;
				}
			}
		}

		.select-radio {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.order-summary {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.section-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			display: block;
		}

		.price-row {
			font-size: 28rpx;
			color: #333;
			padding: 10rpx 0;
		}

		.total-price {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx dashed #eee;

			.label {
				font-size: 28rpx;
				color: #666;
			}

			.value {
				font-size: 36rpx;
				font-weight: bold;
				color: #f56c6c;
			}
		}
	}

	.payment-methods {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;

		.section-title {
			font-size: 28rpx;
			color: #666;
			margin-bottom: 20rpx;
			display: block;
		}

		.method-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&.selected {
				background-color: #f9f9f9;
			}

			.method-name {
				font-size: 28rpx;
				color: #333;
				margin-left: 20rpx;
				flex: 1;
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.payment-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 20rpx 30rpx;
		background-color: #fff;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

		/deep/ .u-button {
			height: 90rpx;
			font-size: 32rpx;
		}
	}

	// 支付金额
	.invitation-popup {
		height: 70vh;
		display: flex;
		flex-direction: column;

		.popup-header {
			padding: 30rpx;
			text-align: center;
			border-bottom: 1rpx solid #bfbfbf;
		}

		.container {
			padding: 20rpx;
			padding-bottom: 120rpx;
			background-color: #f7f7f7;
			min-height: 100vh;
		}

		.card {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 24rpx;
			// margin-bottom: 20rpx;
			box-shadow: 0 2rpx 8rpx rgba(130, 130, 130, 0.0);
		}

		.goods-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #afafaf;

			&:last-child {
				border-bottom: none;
			}
		}

		.goods-info {
			flex: 1;
			display: flex;
			align-items: center;
			overflow: hidden;
		}

		.goods-name {
			font-size: 28rpx;
			color: #333;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 40%;
		}

		.goods-level {
			font-size: 24rpx;
			color: #999;
			margin: 0 10rpx;
		}

		.goods-price {
			font-size: 26rpx;
			color: #ff4d4f;
		}

		.goods-count {
			font-size: 26rpx;
			color: #666;
		}

		.amount-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 16rpx;
			font-size: 26rpx;
			color: #666;
		}

		.total-amount {
			display: flex;
			justify-content: flex-end;
			margin-top: 20rpx;
			font-size: 28rpx;
			font-weight: bold;

			.price {
				color: #ff4d4f;
				margin-left: 10rpx;
			}
		}

		.section-title {
			font-size: 28rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.payment-item {
			display: flex;
			align-items: center;
			// padding: 20rpx 0;
			border-bottom: 1rpx solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}
		}

		.payment-info {
			display: flex;
			align-items: center;
			margin-left: 10rpx;
			font-size: 26rpx;
		}

		.payment-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.upload-area {
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx dashed #eee;
		}

		.upload-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 200rpx;
			height: 200rpx;
			background-color: #f7f7f7;
			border-radius: 8rpx;
			color: #999;
			font-size: 24rpx;
		}

		.footer {
			// position: fixed;
			// bottom: 0;
			margin-top: 30px;
			left: 0;
			right: 0;
			padding: 20rpx;
			// background-color: #fff;
			// box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);

			/deep/ .u-btn {
				height: 80rpx;
				font-size: 30rpx;
			}
		}
	}
</style>